<template>
    <div class="vueAnimationPrc4">
      <button @click="show=!show">
        toggle
      </button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
      <br>
      <!-- transition组件实现元素和组件的进入/离开过渡 -->
      <!-- <transition name="slide-fade">
        <p v-if="show">hello slide</p>
      </transition> -->
    </div>
</template>
<script lang="ts">
import { Vue, Options, Watch, Provide } from 'vue-property-decorator';

@Options({ components: {

} })
export default class VueAnimationPrc4 extends Vue {
  public show = true;
  public beforeCreate() {
  }
}
</script>

<style lang="postcss" scoped>
.vueAnimationPrc4{
  .fade-enter-active,
  .fade-leave-active
  {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from,
  .fade-leave-to
  {
    opacity: 0;
  }

  .slide-fade-enter-active{
    transition: all .3s ease-out;
  }

  .slide-fade-leave-active{
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter-from{
    transform: translateX(20px);
    opacity: 0;
  }
  .slide-fade-leave-to{
    transform: translateX(20px);
    opacity: 0;
  }
}
</style>
